<template>
		<div class="login-box">
			<img class="logo-img" src="../assets/logo.png"  alt="">
			<label for="idcard"><i class="iconfont icon-idcard"></i><input id="idcard" v-model='idCardNum' type="text" placeholder="请输入身份证"></label>
			<label for="idname"><i class="iconfont icon-idname"></i><input id="idname" v-model='realName' type="text"  placeholder="请输入姓名"></label>
			<x-button type="primary" @click.native='login'>登录</x-button>
			<div>
			<cell class="register-btn" :link='{path:"/register"}'>注册</cell>
			</div>
		</div>	
</template>
<script>
	import { XButton, Cell, Group } from 'vux';
	import config from '../config.js';


	export default {
		data(){
			return{
				idCardNum:'',
				realName:''
			}
		},
		methods:{
			login(){
				const { idCardNum, realName } = this
				if (/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(idCardNum) === false) {
					this.$vux.toast.show({
						text:"请输入正确身份证",
						type:'warn'
					})
					return 
				}
				if (realName === '') {
					this.$vux.toast.show({
						text:"请输入姓名",
						type:'warn'
					})
					return
				}
				this.$vux.loading.show({
					text: '加载中'
				})
				this.$http({
					url:config.base+"student/login",
					method:"POST",
					headers:{
						'content-type':'application/x-www-form-urlencoded; charset=UTF-8',
					},
					data:this.qs.stringify({ idCardNum, realName })
				}).then( rep => {
					let { status, result, message }=rep.data;
					if(status === 200){
						localStorage.user = realName;
						localStorage.idCardNum = idCardNum;
						localStorage.userid = result.id;
						localStorage.token = result.token;
						this.$vux.toast.show({ text:message })
						this.$router.push('/class')
					}else{
						this.$vux.toast.show({
							text:data.message,
							type:'warn'
						})
					}
					this.$vux.loading.hide()
				}).catch( (error) => {
					this.$vux.loading.hide()
					this.$vux.toast.show({
						text:'网络错误',
						type:'warn'
					})
          // test
          
      });
				
			}
		},
		components:{
			XButton,
			Cell,
			Group
		}
	}
</script>
<style >
	.login-box{position:relative;text-align:center;font-size:15px;}
	.login-box label{display:block;height:40px;line-height:40px;padding:10px 0;
		margin:10px 0;}
	.login-box label i{
		font-size:36px;
		line-height:40px;
		padding-right:10px;
		vertical-align:middle;
		color:#fff;
	}
	.login-box label input{height:40px;line-height:40px;background:#eee;border:0;padding-left:5px;}
	.logo-img{width:40%;}
	.register-btn{text-align:right;color:#35495E;}
</style>
<style scoped>
	.login-box{width:100%;
  		height:100vh;background:#35495E;padding:30% 10% 0 10%;box-sizing: border-box;}
  	.login-box:before{
  		content: "";
		position: fixed;
		z-index: -1;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
  		background:#35495E;
  		background-size: cover;
  	}
</style>